<template>
  <div class="tuan">
    <!-- 顶部 -->
    <div class="top">
      <div class="list">
        <span @click="status_0" :class="{ active: status == 0 }">正在抢购</span>
        <span @click="status_1" :class="{ active: status == 1 }">上新预告</span>
      </div>
    </div>
    <!-- 列表 -->
    <Roblise
      :goodsrob="goodsrob"
      :goodsnew="goodsnew"
      :status1="status"
      class="roblist"
    ></Roblise>
  </div>
</template>
  
  <script>
import { tuan_list } from "../../utils/api";

import Roblise from "@/components/Tuan/Roblise.vue";
export default {
  components: {
    Roblise,
  },
  data() {
    return {
      status: 0,
      goodsrob: [], //0
      goodsnew: [], //1
    };
  },
  methods: {
    status_0() {
      this.status = 0;
    },
    status_1() {
      this.status = 1;
    },
  },
  mounted() {
    tuan_list({ status: 0 }).then((res) => {
      this.goodsrob = res.data.list;
    });
    tuan_list({ status: 1 }).then((res) => {
      this.goodsnew = res.data.list;
    });
  },
};
</script>
  
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.top {
  height: 200px;
  width: 100%;
  background: repeating-linear-gradient(#ea3323, #f09b37 70%, #f3dba3 100%);
  position: relative;
}
.top .list {
  width: 100%;
  position: absolute;
  top: 140px;
}
.top .list span {
  padding: 0 10px;
  color: #fff;
  font-size: 14px;
}
// 高亮
.active {
  font-size: 16px;
  font-weight: bold;
}
//列表定位
.roblist {
  position: absolute;
  top: 160px;
}
</style>